<template>
  <div class="topic-detail-page">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="8" animated />
    </div>

    <!-- 话题详情 -->
    <div v-else-if="topic" class="topic-detail">
      <!-- 话题头部 - 完整宽度的封面 -->
      <div class="topic-header-full">
        <!-- 背景封面 -->
        <div class="header-cover">
          <img
            :src="getMediaUrl(topic.coverImage) || getDefaultCover()"
            :alt="topic.name"
            class="cover-image"
          />
          <!-- 圆形Logo和顶部信息 -->
          <div class="header-logo-container">
            <img
              :src="getMediaUrl(topic.avatar) || getDefaultAvatar()"
              :alt="topic.name"
              class="logo-image"
            />
            <h1 class="topic-name-large">{{ topic.name }}</h1>
            <div class="topic-header-actions">
              <el-button
                type="success"
                :loading="followLoading"
                size="medium"
                class="follow-btn-large"
                @click="handleFollow"
              >
                <el-icon><Plus /></el-icon>
                Follow
              </el-button>
              <span class="subscribed-text" v-if="topic.isFollowed">
                Thanks, you're now following! To become a contributor send a
                request.
              </span>
              <el-button size="small" class="message-btn">
                <el-icon><ChatDotSquare /></el-icon>
              </el-button>
              <div class="dropdown">
                <el-button size="small" class="more-btn">
                  <el-icon><MoreFilled /></el-icon>
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 内容主体区域 - 两栏布局 -->
      <div class="main-content">
        <!-- 左侧内容区域 -->
        <div class="left-content">
          <!-- 内容标签页 -->
          <div class="content-tabs">
            <el-tabs v-model="activeTab" @tab-change="handleTabChange">
              <el-tab-pane label="About" name="questions">
                <div class="about-section">
                  <!-- 详细描述区域 -->
                  <div class="about-description">
                    <h2 class="about-title">关于</h2>
                    <div class="description-content">
                      <p class="description-text">
                        如果你想关注这个空间，你可以期待找到很多关于爱情、浪漫和人际关系的热情文章。你总会发现关于爱情的美丽而鼓舞人心的故事，以及增进你们关系的有用技巧和创意。你还会找到涉及有效沟通、解决冲突以及与伴侣建立深厚而持久的联系等主题的文章。无论您是单身并正在寻找爱情，还是想改善当前的关系，这个空间都将帮助您发现最佳技巧和实践，以建立充满幸福和满足的浪漫生活。
                      </p>

                      <!-- 其他渠道 -->
                      <div class="other-channels">
                        <h3 class="channels-title">其他渠道</h3>
                        <div class="channels-list">
                          <a href="#" class="channel-item">Natury Dark 博客</a>
                          <a href="#" class="channel-item">Natury 暗通道</a>
                          <a href="#" class="channel-item">大自然的爱频道</a>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 人员搜索 -->
                  <div class="people-search-section">
                    <h2 class="about-title">人</h2>
                    <div class="search-container">
                      <el-input
                        v-model="peopleSearchQuery"
                        placeholder="在Natury Dark'LOVE搜索人"
                        prefix-icon="el-icon-search"
                        class="people-search-input"
                      />
                    </div>

                    <!-- 贡献者申请 -->
                    <div class="contributor-application">
                      <el-button type="primary" class="apply-btn">
                        想成为贡献者吗？在这里申请
                        <el-icon class="right-icon"><ArrowRight /></el-icon>
                      </el-button>
                    </div>

                    <!-- 管理员部分 -->
                    <div class="administrators-section">
                      <h3 class="section-subtitle">管理员</h3>
                      <p class="section-description">
                        管理员可以管理提交、内容和设置
                      </p>
                      <div class="people-list">
                        <div
                          v-for="admin in administrators"
                          :key="admin.id"
                          class="person-item"
                        >
                          <img
                            :src="getMockAvatarByName(admin.name)"
                            :alt="admin.name"
                            class="person-avatar"
                          />
                          <div class="person-info">
                            <div class="person-name">{{ admin.name }}</div>
                            <div class="person-bio">{{ admin.bio }}</div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- 贡献者部分 -->
                    <div class="contributors-section-about">
                      <h3 class="section-subtitle">贡献</h3>
                      <p class="section-description">贡献者可以添加内容</p>
                      <div class="people-list">
                        <div
                          v-for="contributor in contributors"
                          :key="contributor.id"
                          class="person-item"
                        >
                          <img
                            :src="getMockAvatarByName(contributor.name)"
                            :alt="contributor.name"
                            class="person-avatar"
                          />
                          <div class="person-info">
                            <div class="person-name">
                              {{ contributor.name }}
                            </div>
                            <div class="person-bio">{{ contributor.bio }}</div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- 追随者部分 -->
                    <div class="followers-section">
                      <h3 class="section-subtitle">追随者</h3>
                      <p class="section-description">
                        关注者在他们的提要中看到空间内容并接收来自空间的通知
                      </p>
                      <button class="invite-btn">
                        <el-icon><Plus /></el-icon> 邀请
                      </button>
                      <div class="people-list">
                        <div
                          v-for="follower in followers"
                          :key="follower.id"
                          class="person-item"
                        >
                          <img
                            :src="getMockAvatarByName(follower.name)"
                            :alt="follower.name"
                            class="person-avatar"
                          />
                          <div class="person-info">
                            <div class="person-name">
                              {{ follower.name }}
                            </div>
                            <div class="person-bio">{{ follower.bio }}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>

              <el-tab-pane label="Posts" name="articles">
                <div class="articles-section">
                  <!-- 加载状态 -->
                  <div v-if="contentLoading" class="content-loading">
                    <el-skeleton :rows="5" animated />
                  </div>

                  <!-- 文章列表 -->
                  <div v-else-if="articles.length > 0" class="articles-list">
                    <ContentCard
                      v-for="article in articles"
                      :key="article.id"
                      :data="transformArticleData(article)"
                    />
                  </div>

                  <!-- 空状态 -->
                  <div v-else class="empty-state">
                    <el-empty
                      :image-size="120"
                      description="No related articles"
                    >
                      <template #image>
                        <el-icon size="120" color="#d3d3d3"
                          ><Document
                        /></el-icon>
                      </template>
                    </el-empty>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>

          <!-- 分页 -->
          <div v-if="total > 0" class="pagination-container">
            <el-pagination
              v-model:current-page="pagination.pageNum"
              v-model:page-size="pagination.pageSize"
              :total="total"
              :page-sizes="[10, 20, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>

        <!-- 右侧边栏 -->
        <div class="right-sidebar">
          <!-- 贡献者列表 - 仅在Posts标签时显示 -->
          <div v-if="activeTab !== 'questions'" class="contributors-section">
            <h3 class="section-title">6 Contributors</h3>
            <div class="contributors-list">
              <div
                class="contributor-item"
                v-for="(contributor, index) in mockContributors"
                :key="index"
              >
                <img
                  :src="getMockAvatar(index)"
                  alt="Contributor"
                  class="contributor-avatar"
                />
                <div class="contributor-info">
                  <div class="contributor-name">{{ contributor.name }}</div>
                  <div class="contributor-bio">{{ contributor.bio }}</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 详情区域 - 仅在Posts标签时显示 -->
          <div v-if="activeTab !== 'questions'" class="details-section">
            <h3 class="section-title">Details</h3>
            <p class="details-text">
              If you want to follow this space, you can expect to find a lot of
              passionate articles about love, discover beautiful and
              inspirational ideas about love, as well as useful tips and
              effective lead to attract the perfect man and make your
              relationship stronger, and more.
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 错误状态 -->
    <div v-else class="error-state">
      <el-empty :image-size="120" description="话题不存在或已被删除">
        <template #image>
          <el-icon size="120" color="#d3d3d3"><WarningFilled /></el-icon>
        </template>
        <el-button type="primary" @click="$router.push('/topic')">
          返回话题列表
        </el-button>
      </el-empty>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { Plus, ArrowRight } from "@element-plus/icons-vue";
import { getMediaUrl } from "@/utils/media";
import { formatCount } from "@/utils/format";
import { getTopicById, toggleFollowTopic } from "@/api/topic";
import { getQuestionList } from "@/api/question";
import { getArticleList } from "@/api/article";
import { useUserStore } from "@/stores/user";
import QuestionCard from "@/components/QuestionCard.vue";
import ContentCard from "@/views/home/components/ContentCard.vue";

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();

// 响应式数据
const loading = ref(false);
const contentLoading = ref(false);
const followLoading = ref(false);
const topic = ref(null);
const activeTab = ref("questions");
const questions = ref([]);
const articles = ref([]);
const total = ref(0);

// 模拟贡献者数据
const mockContributors = [
  { name: "Natury Dark'LOVE", bio: "works at Real Estate" },
  { name: "Sarah Johnson", bio: "Studied at The United States of America" },
  { name: "Dean Bauer", bio: "Created Metly Community" },
  {
    name: "Lorverly Lopez",
    bio: "Lives in The United States of America (2000-present)",
  },
  { name: "Doris", bio: "former Teacher (2022-2024)" },
];

// 人员搜索查询
const peopleSearchQuery = ref("");

// 管理员数据
const administrators = ref([
  {
    id: 1,
    name: "自然黑暗",
    bio: "住在意大利语 (2016年至今)",
    avatar: "",
  },
]);

// 贡献者数据
const contributors = ref([
  {
    id: 2,
    name: "迪恩·鲍尔斯",
    bio: "小社区学院的创建者",
    avatar: "",
  },
  {
    id: 3,
    name: "桃乐丝",
    bio: "前教师 (2022-2024)",
    avatar: "",
  },
  {
    id: 4,
    name: "盖尔·德尔丁斯·佩雷斯",
    bio: "在德克萨斯州奥斯汀的房地产公司工作 (2014年至今)",
    avatar: "",
  },
]);

// 追随者数据
const followers = ref([
  {
    id: 1,
    name: "穆萨科罗马",
    bio: "前建筑工人",
    avatar: "",
  },
  {
    id: 2,
    name: "阿德里亚娜·伊莱恩",
    bio: "就读于曼彻斯特社区学院",
    avatar: "",
  },
  {
    id: 3,
    name: "Tg 帕斯卡",
    bio: "在卫理公会大学学习刑事司法 (2026)",
    avatar: "",
  },
  {
    id: 4,
    name: "游戏 Nwankwo",
    bio: "住在尼日利亚加拉 (2005年至今)",
    avatar: "",
  },
]);

const pagination = reactive({
  pageNum: 1,
  pageSize: 20,
});

// 生命周期
onMounted(() => {
  // 检查URL参数中的tab参数
  const tabParam = route.query.tab;
  if (tabParam && ["questions", "articles"].includes(tabParam)) {
    activeTab.value = tabParam;
  }

  loadTopicDetail();
  loadContent();
});

// 监听路由参数变化
watch(
  () => route.params.id,
  () => {
    if (route.params.id) {
      loadTopicDetail();
      loadContent();
    }
  }
);

// 监听路由查询参数变化
watch(
  () => route.query.tab,
  (newTab) => {
    if (newTab && ["questions", "articles"].includes(newTab)) {
      activeTab.value = newTab;
    }
  }
);

// 监听标签页变化
watch(activeTab, () => {
  pagination.pageNum = 1;
  loadContent();
});

// 方法
const loadTopicDetail = async () => {
  const topicId = route.params.id;
  if (!topicId) return;

  loading.value = true;
  try {
    const response = await getTopicById(topicId);
    if (response.code === 200) {
      topic.value = response.data;
    } else {
      ElMessage.error(response.message || "获取话题详情失败");
      topic.value = null;
    }
  } catch (error) {
    console.error("获取话题详情失败:", error);
    ElMessage.error("获取话题详情失败");
    topic.value = null;
  } finally {
    loading.value = false;
  }
};

const handleFollow = async () => {
  if (!userStore.isLoggedIn) {
    ElMessage.warning("请先登录");
    return;
  }

  followLoading.value = true;
  try {
    const response = await toggleFollowTopic(topic.value.id);
    if (response.code === 200) {
      // 更新关注状态
      topic.value.isFollowed = !topic.value.isFollowed;

      // 更新关注数
      if (topic.value.isFollowed) {
        topic.value.followerCount = (topic.value.followerCount || 0) + 1;
        ElMessage.success("Followed successfully");
      } else {
        topic.value.followerCount = Math.max(
          0,
          (topic.value.followerCount || 0) - 1
        );
        ElMessage.success("Unfollowed");
      }
    } else {
      ElMessage.error(response.message || "操作失败");
    }
  } catch (error) {
    console.error("关注话题失败:", error);
    ElMessage.error("操作失败");
  } finally {
    followLoading.value = false;
  }
};

const handleTabChange = (tabName) => {
  activeTab.value = tabName;
  pagination.pageNum = 1;
  loadContent();
};

// 加载内容列表
const loadContent = async () => {
  const topicId = route.params.id;
  if (!topicId) return;

  contentLoading.value = true;
  try {
    if (activeTab.value === "questions") {
      await loadQuestions(topicId);
    } else if (activeTab.value === "articles") {
      await loadArticles(topicId);
    }
  } catch (error) {
    console.error("加载内容失败:", error);
    ElMessage.error("加载内容失败");
  } finally {
    contentLoading.value = false;
  }
};

// 加载问题列表
const loadQuestions = async (topicId) => {
  const params = {
    pageNum: pagination.pageNum,
    pageSize: pagination.pageSize,
    topicId: topicId,
    sortType: "latest",
  };

  const response = await getQuestionList(params);
  if (response.code === 200) {
    questions.value = response.data.data || [];
    total.value = response.data.total || 0;
  } else {
    ElMessage.error(response.message || "获取问题列表失败");
  }
};

// 加载文章列表
const loadArticles = async (topicId) => {
  const params = {
    pageNum: pagination.pageNum,
    pageSize: pagination.pageSize,
    topicId: topicId,
    status: 2, // 只显示已发布的文章
    sortType: 2, // 时间倒序
  };

  const response = await getArticleList(params);
  if (response.code === 200) {
    articles.value = response.data.data || [];
    total.value = response.data.total || 0;
  } else {
    ElMessage.error(response.message || "获取文章列表失败");
  }
};

// 处理问题点击
const handleQuestionClick = (question) => {
  router.push(`/question/${question.id}`);
};

// 处理文章点击
const handleArticleClick = (article) => {
  router.push(`/article/${article.id}`);
};

// 生成默认封面图片
const getDefaultCover = () => {
  const gradients = [
    "#667eea,#764ba2",
    "#f093fb,#f5576c",
    "#4facfe,#00f2fe",
    "#43e97b,#38f9d7",
    "#fa709a,#fee140",
    "#30cfd0,#330867",
    "#a8edea,#fed6e3",
    "#ff9a9e,#fecfef",
  ];
  const index = (topic.value?.id || 0) % gradients.length;
  const [color1, color2] = gradients[index].split(",");
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="240">
    <defs>
      <linearGradient id="grad${index}" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:${color1};stop-opacity:1"/>
        <stop offset="100%" style="stop-color:${color2};stop-opacity:1"/>
      </linearGradient>
    </defs>
    <rect width="1200" height="240" fill="url(#grad${index})"/>
  </svg>`;
  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
};

// 生成默认头像
const getDefaultAvatar = () => {
  const colors = [
    "#667eea",
    "#f093fb",
    "#4facfe",
    "#43e97b",
    "#fa709a",
    "#30cfd0",
    "#a8edea",
    "#ff9a9e",
  ];
  const index = (topic.value?.id || 0) % colors.length;
  const color = colors[index];
  const initial = topic.value?.name?.charAt(0).toUpperCase() || "?";
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <circle cx="100" cy="100" r="100" fill="${color}"/>
    <text x="100" y="100" text-anchor="middle" dominant-baseline="central" font-size="80" fill="white" font-weight="600" font-family="Arial, sans-serif">${initial}</text>
  </svg>`;
  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
};

// 获取模拟贡献者头像
const getMockAvatar = (index) => {
  const colors = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4", "#FFEAA7"];
  const color = colors[index % colors.length];
  const names = ["ND", "SJ", "DB", "LL", "DO"];
  const initial = names[index % names.length];
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
    <circle cx="25" cy="25" r="25" fill="${color}"/>
    <text x="25" y="25" text-anchor="middle" dominant-baseline="central" font-size="20" fill="white" font-weight="600" font-family="Arial, sans-serif">${initial}</text>
  </svg>`;
  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
};

// 根据名称生成头像
const getMockAvatarByName = (name) => {
  const colors = [
    "#FF6B6B",
    "#4ECDC4",
    "#45B7D1",
    "#96CEB4",
    "#FFEAA7",
    "#DDA0DD",
    "#98D8C8",
    "#F7DC6F",
  ];
  // 计算名称的哈希值来选择颜色
  let hash = 0;
  for (let i = 0; i < name.length; i++) {
    hash = name.charCodeAt(i) + ((hash << 5) - hash);
  }
  const colorIndex = Math.abs(hash % colors.length);
  const color = colors[colorIndex];

  // 提取名字的首字母
  const initials = name
    .split(" ")
    .map((part) => part.charAt(0))
    .join("")
    .toUpperCase()
    .slice(0, 2);

  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
    <circle cx="25" cy="25" r="25" fill="${color}"/>
    <text x="25" y="25" text-anchor="middle" dominant-baseline="central" font-size="20" fill="white" font-weight="600" font-family="Arial, sans-serif">${initials}</text>
  </svg>`;
  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
};

// 转换文章数据格式以适配 ContentCard 组件
const transformArticleData = (article) => {
  return {
    id: article.id,
    type: "article",
    title: article.title,
    content: article.summary || article.content,
    author: {
      id: article.userId,
      name: article.userNickname,
      avatar: article.userAvatar,
    },
    publishTime: article.publishTime || article.createdTime,
    stats: {
      viewCount: article.viewCount,
      likeCount: article.likeCount,
      commentCount: article.commentCount,
      collectCount: article.collectCount,
    },
    isLiked: article.isLiked,
    isCollected: article.isCollected,
    topics: article.topics || [],
  };
};

// 分页处理
const handleSizeChange = (size) => {
  pagination.pageSize = size;
  pagination.pageNum = 1;
  loadContent();
};

const handleCurrentChange = (page) => {
  pagination.pageNum = page;
  loadContent();
};
</script>

<style lang="scss" scoped>
.topic-detail-page {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.loading-container {
  margin: 40px 0;
  padding: 0 24px;
}

.topic-detail {
  // 全屏封面头部
  .topic-header-full {
    width: 100%;
    position: relative;
    margin-bottom: 0;

    .header-cover {
      width: 100%;
      height: 240px;
      position: relative;
      overflow: hidden;
      background: #f5f5f5;

      .cover-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: brightness(0.7);
      }

      // 封面内的内容容器
      .header-logo-container {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 24px 40px;
        color: white;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));

        .logo-image {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          border: 3px solid white;
          margin-bottom: 16px;
          object-fit: cover;
        }

        .topic-name-large {
          font-size: 36px;
          font-weight: 700;
          margin: 0 0 12px 0;
          color: white;
        }

        .topic-header-actions {
          display: flex;
          align-items: center;
          gap: 12px;
          flex-wrap: wrap;

          .follow-btn-large {
            background: rgba(255, 255, 255, 0.9);
            border-color: rgba(255, 255, 255, 0.9);
            color: #333;
            font-weight: 600;
            border-radius: 24px;
            padding: 8px 20px;

            &:hover {
              background: white;
              border-color: white;
            }
          }

          .subscribed-text {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.9);
            margin-right: 12px;
          }

          .message-btn,
          .more-btn {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.3);
            color: white;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;

            &:hover {
              background: rgba(255, 255, 255, 0.3);
              border-color: rgba(255, 255, 255, 0.4);
            }
          }
        }
      }
    }
  }

  // 主体内容区域 - 两栏布局
  .main-content {
    display: flex;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;

    // 左侧内容区域
    .left-content {
      flex: 1;
    }

    // 右侧边栏
    .right-sidebar {
      width: 320px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    // 内容标签页
    .content-tabs {
      background: white;
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      border: 1px solid #e1e4e8;
      overflow: hidden;
      margin-bottom: 24px;

      :deep(.el-tabs__header) {
        margin: 0;
        background: #f8f9fa;
        border-bottom: 1px solid #e1e4e8;

        .el-tabs__nav-wrap {
          padding: 0 24px;
        }

        .el-tabs__item {
          font-size: 16px;
          font-weight: 500;
          height: 56px;
          line-height: 56px;
          color: #586069;

          &.is-active {
            color: #0366d6;
            font-weight: 600;
          }
        }
      }

      :deep(.el-tabs__content) {
        padding: 24px;
      }

      .content-loading {
        padding: 24px;
      }

      .questions-list,
      .articles-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .empty-state {
        text-align: center;
        padding: 60px 20px;
      }

      /* About页面样式 */
      .about-section {
        .about-description,
        .people-search-section {
          margin-bottom: 40px;
        }

        .about-title {
          font-size: 28px;
          font-weight: 700;
          color: #24292e;
          margin: 0 0 24px 0;
          line-height: 1.2;
        }

        .description-content {
          background: #f8f9fa;
          border-radius: 12px;
          padding: 24px;
          border: 1px solid #e1e4e8;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        .description-text {
          font-size: 16px;
          line-height: 1.7;
          color: #24292e;
          margin-bottom: 28px;
        }

        .other-channels {
          .channels-title {
            font-size: 18px;
            font-weight: 600;
            color: #24292e;
            margin: 0 0 16px 0;
          }

          .channels-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
          }

          .channel-item {
            font-size: 16px;
            color: #0366d6;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 0;

            &:hover {
              text-decoration: underline;
              color: #0256b9;
            }
          }
        }

        /* 搜索区域 */
        .search-container {
          margin-bottom: 24px;
        }

        .people-search-input {
          width: 100%;
          height: 38px;
          border-radius: 8px;
          // padding: 0 16px;
          font-size: 16px;
          // border: 1px solid #e1e4e8;
          transition: all 0.2s ease;
          box-sizing: border-box;
        }

        .people-search-input:focus {
          outline: none;
          border-color: #0366d6;
          box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
        }

        /* 贡献者申请按钮 */
        .contributor-application {
          margin-bottom: 32px;
        }

        .apply-btn {
          height: 56px;
          width: 100%;
          justify-content: space-between;
          background: #ebf0ff;
          border-color: #ebf0ff;
          color: #2e69ff;
          padding: 14px 20px;
          font-size: 16px;
          font-weight: 600;
          border-radius: 2px;
          transition: all 0.2s ease;
          cursor: pointer;
          display: flex;
          align-items: center;

          &:hover {
            background: #d7e1ff;
            border-color: #d7e1ff;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(3, 102, 214, 0.3);
          }

          &:active {
            transform: translateY(0);
          }
        }

        .right-icon {
          font-size: 18px;
          margin-left: auto;
        }

        /* 管理员、贡献者和追随者部分 */
        .administrators-section,
        .contributors-section-about,
        .followers-section {
          margin-bottom: 32px;
          background: white;
          border-radius: 12px;
          padding: 14px;
          border: 1px solid #e1e4e8;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
          transition: box-shadow 0.2s ease;
        }

        .administrators-section:hover,
        .contributors-section-about:hover,
        .followers-section:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        }

        .section-subtitle {
          font-size: 16px;
          color: #24292e;
          margin: 0 0 8px 0;
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .section-description {
          font-size: 14px;
          color: #586069;
          margin: 0 0 20px 0;
          line-height: 1.4;
        }

        /* 人员列表 */
        .people-list {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .person-item {
          display: flex;
          align-items: center;
          gap: 16px;
          border-top: 1px solid #ccc;
          padding-top: 5px;
          transition: background-color 0.2s ease;
        }

        .person-item:hover {
          background-color: #f6f8fa;
        }

        .person-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          object-fit: cover;
          border: 2px solid #f0f0f0;
          flex-shrink: 0;
        }

        .person-info {
          flex: 1;
          min-width: 0;
        }

        .person-name {
          font-size: 16px;
          font-weight: 600;
          color: #24292e;
          margin-bottom: 4px;
          display: flex;
          align-items: center;
          gap: 6px;
        }

        .person-bio {
          font-size: 14px;
          color: #586069;
          line-height: 1.4;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        /* 邀请按钮 */
        .invite-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          padding: 6px 16px;
          background-color: transparent;
          border: 1px solid #0366d6;
          color: #0366d6;
          border-radius: 20px;
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s ease;
          margin-bottom: 16px;
        }

        .invite-btn:hover {
          background-color: #0366d6;
          color: white;
        }
      }
    }

    // 分页容器
    .pagination-container {
      display: flex;
      justify-content: center;
      padding: 24px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      border: 1px solid #e1e4e8;
    }

    // 话题统计信息
    .topic-stats {
      background: white;
      border-radius: 8px;
      padding: 16px;
      border: 1px solid #e1e4e8;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      display: flex;
      justify-content: space-around;
      text-align: center;

      .stats-item {
        .stats-number {
          display: block;
          font-size: 20px;
          font-weight: 600;
          color: #24292e;
          margin-bottom: 4px;
        }

        .stats-label {
          display: block;
          font-size: 12px;
          color: #586069;
        }
      }
    }

    // 提交按钮
    .submit-btn {
      background: #2dce89;
      border-color: #2dce89;
      color: white;
      font-weight: 500;
      padding: 12px;
      border-radius: 8px;
      width: 100%;

      &:hover {
        background: #24a46d;
        border-color: #24a46d;
      }
    }

    // 贡献者列表
    .contributors-section {
      background: white;
      border-radius: 8px;
      padding: 20px;
      border: 1px solid #e1e4e8;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #24292e;
        margin: 0 0 16px 0;
      }

      .contributors-list {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .contributor-item {
          display: flex;
          align-items: center;
          gap: 12px;

          .contributor-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
          }

          .contributor-info {
            flex: 1;

            .contributor-name {
              font-size: 14px;
              font-weight: 500;
              color: #24292e;
            }

            .contributor-bio {
              font-size: 12px;
              color: #586069;
            }
          }
        }
      }
    }

    // 详情区域
    .details-section {
      background: white;
      border-radius: 8px;
      padding: 20px;
      border: 1px solid #e1e4e8;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #24292e;
        margin: 0 0 12px 0;
      }

      .details-text {
        font-size: 14px;
        color: #586069;
        line-height: 1.5;
        margin: 0;
      }
    }
  }
}

.error-state {
  text-align: center;
  padding: 80px 20px;
}

// 响应式设计
@media (max-width: 1024px) {
  .topic-detail {
    .main-content {
      flex-direction: column;

      .right-sidebar {
        width: 100%;
      }
    }
  }
}

@media (max-width: 768px) {
  .topic-detail {
    .topic-header-full {
      .header-cover {
        height: 200px;

        .header-logo-container {
          padding: 16px 20px;

          .logo-image {
            width: 80px;
            height: 80px;
          }

          .topic-name-large {
            font-size: 28px;
          }

          .topic-header-actions {
            .follow-btn-large {
              padding: 6px 16px;
              font-size: 14px;
            }

            .message-btn,
            .more-btn {
              width: 32px;
              height: 32px;
            }
          }
        }
      }
    }

    .main-content {
      padding: 16px;
      gap: 16px;
    }
  }
}

@media (max-width: 480px) {
  .topic-detail {
    .topic-header-full {
      .header-cover {
        height: 160px;

        .header-logo-container {
          .topic-name-large {
            font-size: 24px;
          }

          .topic-header-actions {
            .subscribed-text {
              display: none;
            }
          }
        }
      }
    }
  }
}
</style>
